/*
* @Author: zhushixian
* @Date: 2020-7-23
* @Last Modified by:
* @Last Modified time:
*
*/
<template>
    <div id="dueFundsDetail">
        <page-title :title="ruleTitle" :clickRightButton="clickExplain" rightButton="说明"></page-title>
        <div class="midContentDetail">
            <div class="detail-top">
                <span class="user-name media_font_adaptation_17px" @click="gotoDetail()" htmdEvt="personalDetail_btn1" >{{getData.custName}}</span>
                <span class=" media_font_adaptation_12px" :class="getData.expireType ==2?'user-blue':'user-icon'">{{getData.expireType ==2?'资金到账':(getData.expireType == 0?'项目到期':'付息/分红')}}</span>
            </div>
            <div class="detail-middle clearfix">
                <div class="detail-middle-l">
                    <div class="orange-font media_font_adaptation_17px">{{getData.expireValueString}}{{getData.expireType == 2?'(自填)':'(本金)'}}</div>
                    <div class="gray-font media_font_adaptation_12px">到期资金</div>
                </div>
                <div class="detail-middle-r">
                    <div class="block-font media_font_adaptation_17px">{{getData.projectEndDate}}</div>
                    <div class="gray-font media_font_adaptation_12px">到期时间</div>
                </div>
            </div>
            <div class="detail-bottom media_font_adaptation_12px" htmdEvt="projectDetail_btn1" @click="goProductDetail()" v-if="this.getData.projectName">
                <span>{{this.getData.projectName}}</span>
                <i class="iconfont jicon">&#xe664;</i>
            </div>
        </div>
        <div class="botContent" v-if="this.getData.talkString">
            <div class="bot-top-title clearfix">
                <div class="biao"></div>
                <div class="t-font media_font_adaptation_15px"> 跟进话术推荐</div>

                <button type="button" class="blue-font  "
                                v-clipboard:copy="message"
                                v-clipboard:success="onCopy"
                                v-clipboard:error="onError"
                        htmdEvt="clickToCopy_btn"><i class="iconfont iconCopy media_font_adaptation_13px" >&#xe670;</i>  复制</button>

            </div>
            <div class="text-box media_font_adaptation_15px">{{this.message}}
            </div>
        </div>
        <div v-show="keyShow" :class="[getData.fundsFlag == 0? 'proceed ' :'gray noClick']" class="media_font_adaptation_17px"  @click="addCalendar">{{this.getData.fundsFlag == 0? '一键':'已'}}添加到日程</div>

        <message-box ref="messageBox" :customerId="getData.custNo" :customerName="getData.custName"
                     :scheduleType="getData.expireType == 1 ?'12':'13'"
                     :scheduleTime="getData.projectEndDate"
                     :custSource="getData.custSource"
                     :money="getData.expireValue"
                     :businessId="getData.id"
                     v-on:fundsFlag="fundsFlagStatus"
        ></message-box>
    </div>
</template>

<script  type="text/javascript">
import './dueFundsDetail.less'

import noData from '@src/common/newNoData/newNoData';
import pageTitle from '@src/common/pageTitle/pageTitle'
//弹窗
import messageBox from '@src/common/components/messageBox/dueFundsBox/dueFundsBox'
export default {
    name: "dueFundsDetail",
    components: {noData, pageTitle,messageBox},
    data(){
        return {
            ruleTitle: '详情', // 公共头部中间内容
            status: 1, // 控制底部样式 proceed 橘色  gray 灰色
            message: '',//点击复制后所复制的内容
            getData:{
                expireValueString:'0.00万',
                projectEndDate:'0000-00-00',
                expireType:''
            },
            message1: '确定将此条到期资金添加到日程？',
            keyShow:false
        }
    },
    created(){
        this.initData()
    },
    mounted(){
        this.$parent.changeLoading(false)
    },
    methods: {
        fundsFlagStatus (data) {
            this.getData.fundsFlag = data
        },
        // 初始化数据
        initData() {
            this.$parent.changeLoading(true)
            this.$axiosHttp.http({
                    method: "POST",
                    url: apiUrl.queryFundsDetailApi,
                    needFailCallback: true,
                    params: {
                        id: this.$route.query.id,
                    }
                }, (res) => {
                    console.log('进入成功')
                    this.$parent.changeLoading(false)
                    const {data:{data}} = res
                    this.getData = data
                    this.keyShow = data.expireType == 0? false:true
                    this.message = data.talkString
                }, (res) => {
                    this.$toast(res.data.message)
                },
                (res) => {
                    console.log('jin', res)
                    this.$parent.changeLoading(false)
                })
        },
        //点击右侧说明按钮执行的操作
        clickExplain() {
            //跳转到说明页
            this.$router.push({path: '/lgbCdn/dueFunds/dueFundsList/dueFundsRules.html'})
        },

        // 点击复制
        onCopy (e) {
            this.$toast('复制成功')
        },
        onError (e) {
            console.log('复制失败！')
        },
        addCalendar () {
            this.$refs.messageBox.open({
                message: '确定将此条到期资金添加到日程？',
                showCancelButton: true
            })
        },
        // 跳转到客户详情
        gotoDetail () {
            let params = {
                customerId:this.getData.custNo || '--',
                customerSource: this.getData.custSource + 1
            }
            if(window.appIsIOS){
                this.debounceInit = this.debounce(window.webkit.messageHandlers.gotoCustomerDetail.postMessage(JSON.stringify(params)), 1000)
            }else{
                this.debounceInit = this.debounce(window.jsObj.gotoCustomerDetail(JSON.stringify(params)), 1000)
            }

        },
        // 防抖
        debounce (fn, t) {
            const delay = t || 500
            let timer
            return function () {
                const args = arguments
                if (timer) {
                    clearTimeout(timer)
                }
                timer = setTimeout(() => {
                    timer = null
                    fn.apply(this, args)
                }, delay)
            }
        },
        // 跳转产品详情
        goProductDetail(){
            // console.log('跳转产品详情',item.projectType)
            if(this.getData.dataSource == 1){ // projectType：产品类型：0 通用 1 私募 2 组合 3 单基
                let obj={
                    projectId:this.getData.projectId || '--', //产品id
                    productType:'1', //跳转私募产品详情
                }
                if(!window.appIsIOS){ //如果安卓手机用原有方法，如果是苹果则使用wk
                    window.jsObj.gotoProdetail(JSON.stringify(obj))
                }else{
                    window.webkit.messageHandlers.gotoProdetail.postMessage(JSON.stringify(obj))
                }
            }else if(this.getData.dataSource == 2){
                let obj={
                    projectId:this.getData.projectId || '--', //产品id
                    productType:'2', //跳转通用产品详情
                }
                if(!window.appIsIOS){//如果安卓手机用原有方法，如果是苹果则使用wk
                    window.jsObj.gotoProdetail(JSON.stringify(obj))
                }else{
                    window.webkit.messageHandlers.gotoProdetail.postMessage(JSON.stringify(obj))
                }
            }
        },
    }
}


</script>
